<template>
   <div >
          <el-row>
            <el-col :span="6" class="grid-cell">【题型】：
              <span v-if="itemList.questionType =='1'">单选</span>
              <span v-else-if="itemList.questionType =='2'">多选</span>
              <span v-else>简答</span>
            </el-col>
            <el-col :span="6" class="grid-cell">【编号】：{{itemList.id}}</el-col>
            <el-col :span="6" class="grid-cell">【难度】：
              <span v-if="itemList.difficulty =='1'">简单</span>
              <span v-else-if="itemList.difficulty =='2'">一般</span>
              <span v-else>困难</span>
            </el-col>
            <el-col :span="6" class="grid-cell">【标签】：{{itemList.tags}}</el-col>
            <el-col :span="6" class="grid-cell">【学科】：{{itemList.subjectName}}</el-col>
            <el-col :span="6" class="grid-cell">【目录】：{{itemList.directoryName}}</el-col>
            <el-col :span="6" class="grid-cell">【方向】：{{itemList.direction}}</el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div>【题干】：</div>
              <div style="color: blue;" v-html="itemList.question"></div>
              <div v-if="itemList.questionType =='1'">
                <p>单选题 选项：（以下选中的选项为正确答案）</p>
                <el-radio-group v-model="radioData"  class="ml-4" fill="#409eff">
                  <el-radio :label="item.isRight" size="large"  v-for="item in itemList.options" :key="item.id">
                    {{item.code}}:{{item.title}}</el-radio>
                </el-radio-group>
              </div>
              <div v-else-if="itemList.questionType =='2'">
                <p>多选题 选项：（以下选中的选项为正确答案）</p>
                <el-checkbox-group v-model="checkState"  text-color="#409eff">
                  <el-checkbox :label="item.isRight" v-for="item in itemList.options" :key="item.id"> {{item.title}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-else>简答题 选项：（以下选中为正确答案）</div>
            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">
              <div>【参考答案】：
                <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
                <br>
                <video v-show="showVideo" :src="itemList.videoURL" controls width="320" height="240"></video>
              </div>
            </el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">【答案解析】：<span v-html="itemList.answer"></span></el-col>
          </el-row>
          <hr>
          <el-row>
            <el-col :span="24">【题目备注】：<span v-html="itemList.remarks"></span></el-col>
          </el-row>
        </div>
</template>

<script>
export default {
  props:['itemList'],
  data(){
    return {
      radioData:1,
      checkState:1,
      showVideo:false
    }
  }
}
</script>
<style scoped lang="scss">
    .el-radio-group {
      display: flex;
      flex-direction: column;
      align-items: flex-start
    }
    .el-checkbox-group{
        color: aqua;
        display: flex;
      flex-direction: column;
      align-items: flex-start
    }
      </style>
